<template>
  <div class="charts-container" >
    <!-- 放大时显示遮罩 -->
    <div v-if="activeChart" class="overlay" @click="activeChart = null"></div>

    <!-- 折线图 -->
    <div class="chart-wrapper bar-chart" :class="{ active: activeChart === 'bar' }" style="height: 100px;">
      <AdBarChart />
      <button v-if="activeChart === 'bar'" class="close-btn" @click.stop="activeChart = null">×</button>
      <button v-if="activeChart !== 'bar'" class="expand-btn" @click.stop="openChart('bar')">🔍</button>
    </div>

    <!-- 饼图 -->
    <div class="chart-wrapper pie-chart" :class="{ active: activeChart === 'pie' }">
      <CategoryPieChart />
      <button v-if="activeChart === 'pie'" class="close-btn" @click.stop="activeChart = null">×</button>
      <button v-if="activeChart !== 'pie'" class="expand-btn" @click.stop="openChart('pie')">🔍</button>
    </div>
  </div>
</template>


<script setup>
import { ref } from 'vue'
import AdBarChart from '@/components/charts/AdBarChart.vue'
import CategoryPieChart from '@/components/charts/CategoryPieChart.vue'
import '@/assets/css/picStyle.css'
const activeChart = ref(null)


function openChart(chart) {
  if (activeChart.value === chart) {
    activeChart.value = null
  } else {
    activeChart.value = chart
  }
}

// 粒子参数配置，模拟星空闪烁
const particlesOptions = {
  background: {
    color: {
      value: "transparent"
    }
  },
  fpsLimit: 60,
  particles: {
    number: {
      value: 100,
      density: {
        enable: true,
        area: 800
      }
    },
    color: {
      value: "#ffffff"
    },
    shape: {
      type: "circle"
    },
    opacity: {
      value: 0.8,
      random: true,
      anim: {
        enable: true,
        speed: 1,
        opacity_min: 0.2,
        sync: false
      }
    },
    size: {
      value: 2,
      random: true,
      anim: {
        enable: true,
        speed: 2,
        size_min: 0.5,
        sync: false
      }
    },
    move: {
      enable: false,
      speed: 0,
      direction: "none",
      random: false,
      straight: false,
      outMode: "out",
      bounce: false
    }
  },
  detectRetina: true
};
</script>

<style scoped>

</style>


